<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>MDR</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./modern.css">
    <link href="./modern-responsive.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
  </head>
  <body>
  	<header>
  		<div id="imglogo"></div>
  		<div id="titrelogo">IOBH</div>
  	</header>

  	<div id="contenair">

	<nav>
		<span class="titre">Contacts(s)</span>
	  <ul>
	    <li><img class="contactsAvatar imgonline" src="https://secure.wlxrs.com/$live.controls.images/ic/bluemanm.png" /><a href="index.php">Luc</a></li>
	    <li><img class="contactsAvatar" src="https://secure.wlxrs.com/$live.controls.images/ic/bluemanm.png" /><a href="contact.php">Mario</a></li>
	    	    <li><img class="contactsAvatar" src="https://secure.wlxrs.com/$live.controls.images/ic/bluemanm.png" /><a href="contact.php">Luigi</a></li>
	    	    	    <li class="activeContact"><img class="contactsAvatar imgonline" src="https://secure.wlxrs.com/$live.controls.images/ic/bluemanm.png" /><a href="index.php">Boris</a></li>
	  </ul>
	</nav>

	<section>
		<span class="titre">Boris</span>
		<div id="messages">

 <ul class="replies">
        <li class="bg-color-blue" style="min-height: 70px;">
            <b class="sticker sticker-left sticker-color-blue"></b>
            <div class="avatar"><img src="https://secure.wlxrs.com/$live.controls.images/ic/bluemanm.png" width="40" height="40"/></div>
            <div class="reply">
                <div class="date">01.01.2012</div>
                <div class="author">Boris</div>
                <div class="text">Bonjour øa va ?</div>
            </div>
        </li>

        <li class="bg-color-blueDark" style="min-height: 70px;">
            <b class="sticker sticker-right sticker-color-blueDark"></b>
            <div class="avatar"><img src="https://secure.wlxrs.com/$live.controls.images/ic/bluemanm.png" width="40" height="40"/></div>
            <div class="reply">
                <div class="date">01.01.2012</div>
                <div class="author">Me</div>
                <div class="text">Oui et toi ?</div>
            </div>
        </li>

                <li class="bg-color-blue" style="min-height: 70px;">
            <b class="sticker sticker-left sticker-color-blue"></b>
            <div class="avatar"><img src="https://secure.wlxrs.com/$live.controls.images/ic/bluemanm.png" width="40" height="40"/></div>
            <div class="reply">
                <div class="date">01.01.2012</div>
                <div class="author">Boris</div>
                <div class="text">Bonjour øa va ?</div>
            </div>
        </li>

        <li class="bg-color-blueDark" style="min-height: 70px;">
            <b class="sticker sticker-right sticker-color-blueDark"></b>
            <div class="avatar"><img src="https://secure.wlxrs.com/$live.controls.images/ic/bluemanm.png" width="40" height="40"/></div>
            <div class="reply">
                <div class="date">01.01.2012</div>
                <div class="author">Me</div>
                <div class="text">Oui et toi ?</div>
            </div>
        </li>

                <li class="bg-color-blue" style="min-height: 70px;">
            <b class="sticker sticker-left sticker-color-blue"></b>
            <div class="avatar"><img src="https://secure.wlxrs.com/$live.controls.images/ic/bluemanm.png" width="40" height="40"/></div>
            <div class="reply">
                <div class="date">01.01.2012</div>
                <div class="author">Boris</div>
                <div class="text">Bonjour øa va ?</div>
            </div>
        </li>

        <li class="bg-color-blueDark" style="min-height: 70px;">
            <b class="sticker sticker-right sticker-color-blueDark"></b>
            <div class="avatar"><img src="https://secure.wlxrs.com/$live.controls.images/ic/bluemanm.png" width="40" height="40"/></div>
            <div class="reply">
                <div class="date">01.01.2012</div>
                <div class="author">Me</div>
                <div class="text">Oui et toi ?</div>
            </div>
        </li>
                <li class="bg-color-blue" style="min-height: 70px;">
            <b class="sticker sticker-left sticker-color-blue"></b>
            <div class="avatar"><img src="https://secure.wlxrs.com/$live.controls.images/ic/bluemanm.png" width="40" height="40"/></div>
            <div class="reply">
                <div class="date">01.01.2012</div>
                <div class="author">Boris</div>
                <div class="text">Bonjour øa va ?</div>
            </div>
        </li>

        <li class="bg-color-blueDark" style="min-height: 70px;">
            <b class="sticker sticker-right sticker-color-blueDark"></b>
            <div class="avatar"><img src="https://secure.wlxrs.com/$live.controls.images/ic/bluemanm.png" width="40" height="40"/></div>
            <div class="reply">
                <div class="date">01.01.2012</div>
                <div class="author">Me</div>
                <div class="text">Oui et toi ?</div>
            </div>
        </li>



    </ul>
		</div>
		<div id="writemessage">
   <div class="input-control textarea" style="
    margin-left: 40px;
    width: 355px;">
        <textarea>
        </textarea>
    </div>
		</div>
	</section>

<hr />
</div>

	<footer>
		© 2012 Honoré & Giovanetti.
	</footer>



  </body>
</html>